(() => {
  let setTimeOutId = null;
  let setIntervalId = null;
  const initSNum = 10;
  let sNum = initSNum;
  let isCountingDown = false;  // 标记是否正在倒计时

  const countDownDom = document.querySelector('.countdown');
  const startBtn = document.querySelector('.btn-start');
  const endBtn = document.querySelector('.btn-end');

  const countDown = () => {
    isCountingDown = true;  // 开始倒计时
    countDownDom.innerText = sNum;
    setIntervalId = setInterval(() => {
      sNum--;
      countDownDom.innerText = sNum;
      if (sNum <= 0) {
        initClear();
        // 获取所有的学生标签li
        const stus = document.querySelectorAll('li');
        if (stus.length > 0) {
          clearStuActiveAll(stus); // 确保所有学生都没有选中
        }
      }
    }, 1000);
  };

  const initClear = () => {
    clearInterval(setIntervalId);
    clearTimeout(setTimeOutId);
    setIntervalId = null;
    setTimeOutId = null;
    sNum = initSNum;
    countDownDom.innerText = sNum;
    isCountingDown = false; // 倒计时结束
  };

  const clearStuActiveAll = (stus) => {
    stus.forEach(stu => {
      stu.classList.remove('active');
    });
  };

  const setRandomStuAddActive = () => {
    const stus = document.querySelectorAll('li');
    if (stus.length === 0) return;

    clearStuActiveAll(stus);
    let rand = Math.floor(Math.random() * stus.length);
    stus[rand].classList.add('active');

    // 继续抽取直到倒计时结束
    if (isCountingDown) {
      setTimeOutId = setTimeout(setRandomStuAddActive, 100);
    }
  };

  startBtn.addEventListener('click', () => {
    countDown();
    setRandomStuAddActive();
  });

  endBtn.addEventListener('click', () => {
    initClear();
  });
})();

(() => {
  document.addEventListener('DOMContentLoaded', () => {
    const addGroupButton = document.querySelector('.btn-addGroup');
    const container = document.querySelector('.stu-in');

    addGroupButton.addEventListener('click', () => {
      const groupNum = prompt('请输入组号');
      if (groupNum) {
        const groupTitle = `第${groupNum}组`;
        const newGroup = document.createElement('div');
        newGroup.classList.add('group');
        newGroup.innerHTML =
          `<h3>${groupTitle}
            <a class="addStu" href="javascript:void(0)">添加成员</a>
            <a class="delGroup" href="javascript:void(0)">删除本组</a>
          </h3>
          <ul>
            <!-- 在这里添加新成员 -->
          </ul>`;
        container.appendChild(newGroup);

        bindGroupEvents(newGroup);
      }
    });

    document.querySelectorAll('.group').forEach(group => bindGroupEvents(group));
  });

  function bindGroupEvents(group) {
    const addStuButton = group.querySelector('.addStu');
    const delGroupButton = group.querySelector('.delGroup');
    const ul = group.querySelector('ul');

    addStuButton.addEventListener('click', () => {
      const studentName = prompt('请输入成员名字');
      if (studentName) {
        const newMember = createMemberElement(studentName);
        ul.appendChild(newMember);
      }
    });

    delGroupButton.addEventListener('click', () => {
      if (confirm('确定要删除这个组吗？')) {
        group.remove();
      }
    });

    ul.querySelectorAll('.stu-item').forEach(member => {
      bindMemberEvents(member);
    });
  }

  function createMemberElement(name) {
    const newMember = document.createElement('li');
    newMember.classList.add('stu-item');
    newMember.innerHTML = `${name}<div class="close-btn"><span class="iconfont icon-close"></span></div>`;
    bindMemberEvents(newMember);
    return newMember;
  }

  function bindMemberEvents(member) {
    const closeButton = member.querySelector('.close-btn');
    closeButton.addEventListener('click', () => {
      if (confirm(`确定要删除成员 ${member.textContent.trim()} 吗？`)) {
        member.remove();
      }
    });
  }
})();
